<template>
  <div class="yoyo-container mx-auto min-h-screen relative">
    <QueryHeader @input="handleInput" :iccid="iccid" />

    <!-- 表头（固定在外层容器顶部） -->
    <div class="mx-4 w-[calc(100%-2rem)] mt-3">
      <div class="grid grid-cols-4 gap-4 text-sm font-medium text-gray-700 bg-white z-10 h-10 leading-10">
        <div class="text-center">{{ $t('query.date') }}</div>
        <div class="text-center">{{ $t('query.country') }}</div>
        <div class="text-center">{{ $t('query.status') }}</div>
        <div class="text-center">{{ $t('query.usage') }}</div>
      </div>
    </div>

    <!-- 列表容器 -->
    <div class="mx-4 w-[calc(100%-2rem)] absolute top-56 bottom-18 overflow-y-auto">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="list.length > 0">
        <van-list v-model="loading" :finished="finished" :finished-text="$t('query.noMoreData')" :loading-text="$t('query.loading')" @load="onLoad">
          <!-- 数据列表 -->
          <div class="bg-white rounded-b-lg overflow-hidden h-full">
            <div
              v-for="(item, index) in list"
              :key="item.id"
              :class="['py-3 border-b border-gray-100 grid grid-cols-4 gap-4 text-sm', index % 2 === 0 ? 'bg-gray-50' : 'bg-white']">
              <div class="text-center text-gray-800">{{ item.date }}</div>
              <div class="text-center flex items-center justify-center">
                <img :src="item.countryFlag" :alt="item.country" class="w-5 h-4 mr-2 rounded" />
                <span class="text-gray-800">{{ item.country }}</span>
              </div>
              <div class="text-center">{{ getStatusText(item.status) }}</div>
              <div class="text-center">{{ item.usage }}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <van-empty v-else :description="$t('common.noData')" />
    </div>

    <div class="fixed h-14 bottom-0 left-0 right-0 pb-[env(safe-area-inset-bottom)] container mx-auto">
      <div class="flex items-center h-full justify-center w-full lg:mx-4 lg:w-[calc(100%-2rem)]">
        <van-button type="danger" round class="w-38 h-9" color="#ff7a00" @click="handleBind">{{ $t("query.bindToAccount") }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import QueryHeader from "@/components/query/Header.vue"
import { PullRefresh, List } from "vant"

export default {
  name: "Query",
  components: {
    QueryHeader,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  data() {
    return {
      // 列表相关数据
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageNo: 1,
      pageSize: 10,

      // 模拟数据
      mockData: [
        {
          id: 1,
          date: "2024-01-15",
          country: "USA",
          countryFlag: "https://flagcdn.com/w40/us.png",
          status: "active",
          usage: "2.5GB",
          total: "5GB",
        },
        {
          id: 2,
          date: "2024-01-14",
          country: "Japan",
          countryFlag: "https://flagcdn.com/w40/jp.png",
          status: "expired",
          usage: "1.2GB",
          total: "3GB",
        },
        {
          id: 3,
          date: "2024-01-13",
          country: "UK",
          countryFlag: "https://flagcdn.com/w40/gb.png",
          status: "pending",
          usage: "0.8GB",
          total: "2GB",
        },
        {
          id: 4,
          date: "2024-01-12",
          country: "Germany",
          countryFlag: "https://flagcdn.com/w40/de.png",
          status: "active",
          usage: "3.1GB",
          total: "5GB",
        },
        {
          id: 5,
          date: "2024-01-11",
          country: "France",
          countryFlag: "https://flagcdn.com/w40/fr.png",
          status: "active",
          usage: "1.8GB",
          total: "4GB",
        },
        {
          id: 6,
          date: "2024-01-10",
          country: "Canada",
          countryFlag: "https://flagcdn.com/w40/ca.png",
          status: "expired",
          usage: "2.9GB",
          total: "3GB",
        },
        {
          id: 7,
          date: "2024-01-09",
          country: "Australia",
          countryFlag: "https://flagcdn.com/w40/au.png",
          status: "active",
          usage: "1.5GB",
          total: "5GB",
        },
        {
          id: 8,
          date: "2024-01-08",
          country: "South Korea",
          countryFlag: "https://flagcdn.com/w40/kr.png",
          status: "pending",
          usage: "0.5GB",
          total: "2GB",
        },
        {
          id: 9,
          date: "2024-01-07",
          country: "Singapore",
          countryFlag: "https://flagcdn.com/w40/sg.png",
          status: "active",
          usage: "2.2GB",
          total: "3GB",
        },
        {
          id: 10,
          date: "2024-01-06",
          country: "Thailand",
          countryFlag: "https://flagcdn.com/w40/th.png",
          status: "expired",
          usage: "1.1GB",
          total: "2GB",
        },
        {
          id: 11,
          date: "2024-01-05",
          country: "Malaysia",
          countryFlag: "https://flagcdn.com/w40/my.png",
          status: "active",
          usage: "3.5GB",
          total: "5GB",
        },
        {
          id: 12,
          date: "2024-01-04",
          country: "Indonesia",
          countryFlag: "https://flagcdn.com/w40/id.png",
          status: "pending",
          usage: "0.9GB",
          total: "3GB",
        },
        {
          id: 13,
          date: "2024-01-03",
          country: "Philippines",
          countryFlag: "https://flagcdn.com/w40/ph.png",
          status: "active",
          usage: "2.7GB",
          total: "4GB",
        },
        {
          id: 14,
          date: "2024-01-02",
          country: "Vietnam",
          countryFlag: "https://flagcdn.com/w40/vn.png",
          status: "expired",
          usage: "1.9GB",
          total: "2GB",
        },
        {
          id: 15,
          date: "2024-01-01",
          country: "India",
          countryFlag: "https://flagcdn.com/w40/in.png",
          status: "active",
          usage: "4.2GB",
          total: "5GB",
        },
      ],
      iccid: "",
    }
  },
  methods: {
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        active: this.$t('query.statusActive'),
        expired: this.$t('query.statusExpired'),
        pending: this.$t('query.statusPending'),
      }
      return statusMap[status] || status
    },

    // 下拉刷新
    onRefresh() {
      this.pageNo = 1
      this.finished = false
      this.list = []
      this.loadData()
    },

    // 上拉加载
    onLoad() {
      this.pageNo += 1
      this.loadData()
    },

    // 加载数据
    loadData() {
      // 模拟API请求延迟
      setTimeout(() => {
        const startIndex = (this.pageNo - 1) * this.pageSize
        const endIndex = startIndex + this.pageSize
        const newData = this.mockData.slice(startIndex, endIndex)

        if (this.refreshing) {
          this.list = newData
          this.refreshing = false
        } else {
          this.list = [...this.list, ...newData]
        }

        this.loading = false

        // 判断是否已加载完所有数据
        if (endIndex >= this.mockData.length) {
          this.finished = true
        } else {
          this.page++
        }
      }, 1000)
    },

    handleInput(value) {
      this.iccid = value
    },

    goToCart() {
      this.$router.push("/cart")
    },

    // 立即购买按钮点击事件
    handleBind() {
      console.log("立即购买")
      // 可以在这里添加购买逻辑，比如跳转到购买页面
      // this.$router.push("/products")
    },
  },

  // 组件挂载后初始化数据
  mounted() {
    // 初始化加载数据
    this.loadData()
    console.log(this.$route.query)
  },
  created() {
    console.log(this.$route.query.iccid)
    this.iccid = this.$route.query.iccid
  }
}
</script>

<style scoped></style>
